<template>
  <div>
    <u-card title="流量">
      <a-table
        :columns="trackfficColumns"
        :data-source="trackfficData"
        :pagination="false"
        :loading="loading"
      >
        <template slot="traffic" slot-scope="row">
          <div class="traffic" v-for="(it, index) in row.traffic" :key="index">
            <div class="traffic-title">{{ it }}</div>
          </div>
        </template>
      </a-table>
    </u-card>
    <u-card title="最新事件" style="height: auto">
      <a-table
        :columns="eventColumns"
        :data-source="eventData"
        :pagination="false"
        :loading="loading"
      >
        <span slot="action" slot-scope="row">
          <a-icon
            v-if="row.action == 1"
            type="check-circle"
            theme="twoTone"
            two-tone-color="#52c41a"
          />
          <a-icon
            v-else-if="row.action == 2"
            type="close-circle"
            theme="twoTone"
            two-tone-color="#f00"
          />
        </span>
      </a-table>
    </u-card>
  </div>
</template>

<script>
import { mockEvent, mergeTraffic } from "@/config/web/data/main";

export default {
  data() {
    return {
      trackfficData: mergeTraffic,
      trackfficColumns: [
        {
          title: "流量统计",
          key: "traffic",
          width: 240,
          dataIndex: "traffic",
          customRender(text) {
            return text[0] || "-";
          },
        },
        {
          title: "",
          key: "traffic1",
          dataIndex: "traffic",
          width: 140,
          customRender(text) {
            return text[1] || "-";
          },
        },
        {
          title: "TCP协议分布（BPS）",
          key: "TCP_protocol_distribution_BPS",
          dataIndex: "TCP_protocol_distribution_BPS",
          customRender(text) {
            return text || "-";
          },
        },
        {
          title: "UDP协议分布（BPS）",
          key: "UDP_protocol_distribution_BPS",
          dataIndex: "UDP_protocol_distribution_BPS",
          customRender(text) {
            return text || "-";
          },
        },
        {
          title: "ICMP（BPS）",
          key: "ICMP_BPS",
          dataIndex: "ICMP_BPS",
          customRender(text) {
            return text || "-";
          },
        },
      ],

      eventData: mockEvent,
      eventColumns: [
        {
          title: "时间",
          key: "time",
          dataIndex: "time",
        },
        {
          title: "动作",
          key: "action",
          scopedSlots: { customRender: "action" },
        },
        {
          title: "事件",
          key: "event",
          dataIndex: "event",
        },
        {
          title: "源",
          key: "source",
          dataIndex: "source",
        },
        {
          title: "目的",
          key: "destination",
          dataIndex: "destination",
        },

        {
          title: "事情摘要",
          key: "eventSummary",
          dataIndex: "eventSummary",
        },
      ],
      loading: false,
    };
  },
};
</script>

<style lang="scss">
.web-index .app-main {
  background: none;
  padding: 0;

  .u-card {
    margin-bottom: 20px;
    height: calc(100% - 20px);
  }

  .ant-table-thead > tr > th,
  .ant-table-tbody > tr > td {
    padding: 8px 16px;
  }
}
</style>
